<template>
  <div class="main-box">
    <ProTable :columns="columns" ref="proRef" :requestApi="list" rowKey="id">
      <template #tableHeader="scope">
        <el-button type="primary" @click="opera(undefined)" v-auth="'添加'">创建运营人员</el-button>
        <el-button
          type="danger"
          @click="deleteApi(scope.selectedListIds)"
          :disabled="scope.selectedListIds.length === 0"
          v-auth="'删除'"
          >批量删除</el-button
        >
      </template>
      <template #avatar="{ row }">
        <el-avatar :src="cover(row.avatar)" shape="circle" :size="100"></el-avatar>
      </template>
      <template #lous="{ row }">{{ row.louPan.length }}</template>
      <template #opera="{ row }">
        <div>
          <!-- <el-button type="primary" link :icon="Tools" @click="openLouPan(row)">添加楼盘</el-button> -->
          <el-button type="primary" link :icon="EditPen" @click="opera(row)" v-auth="'编辑'">编辑</el-button>
          <el-button type="primary" link :icon="Delete" @click="deleteApi([row.id])" v-auth="'删除'">删除</el-button>
        </div>
      </template>
      <template #status="{ row }">
        <el-switch
          v-model="row.status"
          active-text="启用"
          inactive-text="禁用"
          inline-prompt
          @change="changeApi(row)"
          v-auth="'状态'"
        ></el-switch>
      </template>
    </ProTable>
    <operateDrawer ref="brokerRef"></operateDrawer>
  </div>
</template>

<script setup lang="ts">
import { EditPen, Delete } from "@element-plus/icons-vue";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import operateDrawer from "../components/add.vue";
import { ref } from "vue";
import { useUserStore } from "@/stores/modules/user";
import { ElMessage } from "element-plus";
import { useHandleData } from "@/hooks/useHandleData";
import { list, changeStatus, deleteOp, add, edit } from "@/api/modules/operater";

const { userInfo } = useUserStore();

const cover = (cover: string) => {
  if (cover) return userInfo.prefix + cover;
  return "";
};

const brokerRef = ref<InstanceType<typeof operateDrawer> | null>();
const proRef = ref<InstanceType<typeof ProTable> | null>();

const columns: ColumnProps[] = [
  { type: "selection", width: 80 },
  { prop: "avatar", label: "头像", width: 150 },
  { prop: "username", label: "姓名" },
  { prop: "phone", label: "手机" },
  { prop: "status", label: "启用/禁用" },
  { prop: "opera", label: "操作", width: 350 }
];

const opera = (row: any) => {
  const params: any = {
    row: row ? row : { username: "", phone: "", avatar: "", qr_code: "", status: true },
    api: row ? edit : add,
    getTable: proRef.value?.getTableList,
    isEdit: row ? true : false
  };
  brokerRef.value?.acceptParams(params);
};

// 修改状态
const changeApi = async (val: any) => {
  try {
    await changeStatus(val);
    ElMessage.success("成功");
  } catch (error) {}
};

const deleteApi = async (ids: any) => {
  try {
    await useHandleData(deleteOp, { ids }, "删除所选内容");
    proRef.value?.getTableList();
  } catch (error) {}
};
</script>

<style></style>
